import styled from 'styled-components';

export const HomeWrapper=styled.div`
width:1200px;
margin:0 auto;
overflow:hidden;
`;

export const HomeLeft=styled.div`
margin-left:15px;
padding-top:30px;
width:780px;
float:left;
.banner-img {
    width:780px;
    height:337.5px;
}
`;

export const HomeRight=styled.div`
width:350px;
float:right;
`;

export const TopicWrapper=styled.div`
padding:20px 0 10px 0;
overflow:hidden;
margin-left:-14px;
border-bottom:1px solid #dcdcdc;
`;

export const TopicItem=styled.div`
float:left;
background-color:#f7f7f7;
height:40px;
line-height:40px;
font-size:14px;
color:#000;
border:1px solid #dcdcdc;
border-radius:4px;
padding-right:10px;
margin-left:14px;
margin-bottom:14px;
.topic-pic {
    float:left;
    width:40px;
    height:40px;
    margin-right:10px;
}
`;

export const ListItem=styled.div`
padding:20px 0;
border-bottom:1px solid #dcdcdc;
overflow:hidden;
.pic {
    width:156px;
    height:125px;
    float:right;
    border-radius:10px;
}
`;

export const ListInfo=styled.div`
width:600px;
float:left;
.title{
    color:#000;
    line-height:27px;
    font-size:18px;
    font-weight:bold;
}
.desc {
    font-size:13px;
    line-height:24px;
    color:#999;
}
`;

export const RecommendWrapper=styled.div`
margin:30px 0;
width:350px;
`;

export const RecommendItem=styled.div`
width:350px;
height:62px;
background-image:url(${(props)=>props.imgUrl});
background-size:cover;
margin-bottom:20px;
`;

export const LoadMore=styled.div`
width:100%;
height:40px;
line-height:40px;
background-color:#a5a5a5;
text-align:center;
border-radius:20px;
color:#fff;
margin:30px 0;
`;

export const BackTop=styled.div`
position:fixed;
width:60px;
height:60px;
line-height:60px;
text-align:center;
border:1px solid #ccc;
right:100px;
bottom:100px;
font-size:14px;
`